<template>
	<div class="footerContent">
		<div class="monitoring">
			<!-- <div class="monitoringBar">
				<div class="iconBox">
					<i class="wj-icon-diannao"></i>
				</div>
				<div class="itemBox">
					<span>12%</span>
					<span>CPU</span>
				</div>
				<div class="itemBox">
					<span>66%</span>
					<span>MEM</span>
				</div>
				<div class="itemBox">
					<span>100%</span>
					<span>DISK</span>
				</div>
			</div> -->
		</div>
		<div class="copyright">{{ baseInfo.footerTitle }}</div>
		<div class="version"></div>
	</div>
</template>
<script>
import baseInfo from "@/utils/config/baseInfo.json";
import {system_companyInfo} from "@/utils/request/api";
export default {
	name: "Footer",
	data() {
		return {
			baseInfo: baseInfo,
		};
	},
	created() {
    this.getOem();
  },
	mounted() {},
	methods: {
    async getOem(){
      await system_companyInfo().then(res => {
        if (res.code === 200) {
          this.baseInfo = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.footerContent {
	width: 100%;
	height: 68px;
	background: #f2f2f2;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.monitoring {
		width: 20%;
		height: 100%;
		padding: 0 0 0 18px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.monitoringBar {
			padding: 4px 0;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.iconBox {
				padding: 0 8px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.wj-icon-diannao {
					font-size: 24px;
					color: #6f6e6e;
				}
			}
			.itemBox {
				padding: 0 8px;
				border-left: 2px solid #8e8e8e;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				span {
					font-size: 14px;
				}
			}
		}
	}
	.copyright {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}
	.version {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		font-size: 18px;
		padding: 0 18px 0 0;
	}
}
</style>
